<template>
    <base-breadcrumb :title="$route.meta.title">
        <!-- 党务监督编辑 -->
        <a-form-model
            ref="ruleForm"
            :model="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
            :rules="editModel != 0 ? rules : {}"
        >
            <a-spin :spinning="loading">
                <!-- 表格 -->
                <a-card :bordered="false">
                    <title-name title="基本信息"></title-name>

                    <custom-form
                        :formList="formList"
                        :form="form"
                        :editModel="editModel == 0 ? '' : ''"
                        :orgCode.sync="form.level"
                        :orgCodeName.sync="form.levelName"
                    >
                        <template #personIds>
                                          <a-tag
                                v-for="person in form.personIds"
                                :key="person.id"
                                :closable="editModel != 0"
                                @close="form.personIds = form.personIds.filter((item) => person.id !== item.id)"
                                color="#108ee9"
                                >{{ person.name }}</a-tag
                            >
                                          <a-button
                                @click="visible = true"
                                v-if="editModel != 0"
                                icon="plus"
                                :class="{ ml12: form.personIds.length > 0 }"
                                >添加人员</a-button
                            >
                                        </template
                        >
                        <!-- 附件上传 -->
                        <template #fileInfos>
                            <template v-if="editModel != 0">
                                <l-table businessCode="UN07" :uploadArrys.sync="form.fileInfos"></l-table>
                                <div class="file_prompt">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
                            </template>
                            <file-link v-else :fileList="form.fileInfos" style="margin-top: -3px"></file-link>
                        </template>
                    </custom-form>
                </a-card>
            </a-spin>
            <!-- 页脚操作栏 -->
            <div class="btn_box page-btn-right-top">
                <a-button
                    :loading="loading"
                    v-if="editModel != 0"
                    type="primary"
                    class="button_right"
                    @click="handleSubmit"
                    >提交</a-button
                >
                <a-button type="primary" @click="handleActiveClose">关闭</a-button>
            </div>
            <SelectPersonModal :persons="form.personIds" :visible.sync="visible" @confirmSelect="visible = false"/>
        </a-form-model>
    </base-breadcrumb>
</template>

<script>
import {
    getSupervisePartyActivity,
    addSupervisePartyActivity,
    updateSupervisePartyActivity,
} from '@/api/disciplineInspection/supervision' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import Selector from '@/components/Select/Selector'

import SelectSubCompany from '@/components/Select/SelectSubCompany'
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import SelectOrgPeople from '@/components/Select/SelectOrgPeople'
import { updateUnionActivity } from '@/api/union/culturalActivities'
import SelectPersonModal from '@/components/SelectPersonModal'
export default {
    name:'a'+ Date.now(),
    extends: new BaseEditPage(),
    components: {
        SelectSubCompany,
        SelectOrgPeople,
        SelectPersonModal,
    },
    data() {
        return {
            visible: false, //人员选择控件
            loading: false, // 加载控件
            editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
            form: { personIds: [] }, // 表单
            rules: {
                unit: [{ required: true, message: '请选择单位', trigger: 'blur' }],
                level: [{ required: true, message: '请选择层级', trigger: 'change' }],
                activityDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
                acitvityContent: [{ required: true, message: '请输入活动内容', trigger: 'change' }],
                personIds: [{ type: 'array', required: true, message: '请选择参加人员', trigger: 'blur' }],
                fileInfos: [{ type: 'array', required: true, message: '请上传附件', trigger: 'blur' }],
            }, // 校验规则
            init: false, // 初始化控件
        }
    },
    watch: {
        // 监听附件实现附件校验
        'form.fileInfos'() {
            if (this.editModel != 0 && this.init) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('fileInfos')
                })
            }
        },
        // 监听附件实现附件校验
        'form.personIds'() {
            if (this.editModel != 0 && this.init && this.form.personIds?.length != 0) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('personIds')
                })
            }
        },
    },
    mounted() {
        this.$route.meta.title = ['三重一大查看', '三重一大编辑', '三重一大新增'][this.editModel]
        // 不为添加时请求详情
        if (this.editModel != 2) {
            this.loading = true
            getSupervisePartyActivity(this.id)
                .then((res) => {
                    this.loading = false
                    this.form = {
                        ...res.data,
                        unit: {
                            value: res.data.orgId,
                            label: res.data.orgName,
                        },
                    }
                    if (this.form.level == 'CO') {
                        this.form.levelName = '公司'
                    } else if (this.form.level == 'BC') {
                        this.form.levelName = '分公司'
                    } else if (this.form.level == 'PD') {
                        this.form.levelName = '项目'
                    }

                    this.$nextTick(() => {
                        this.init = true
                    })
                })
                .catch(() => {
                    this.loading = false
                })
        } else {
            this.$nextTick(() => {
                this.init = true
            })
        }
    },
    computed: {
        formList() {
            return [
                {
                    keyName: 'activityDate',
                    type: 'a-date-picker',
                    placeholder: '请选择日期',
                    disabled: this.editModel == 0,
                    label: '活动时间',
                    attrs: {
                        valueFormat: 'YYYY-MM-DD',
                    },
                },
                {
                    type: 'BaseInput',
                    keyName: 'levelName',
                    disabled: true,
                    placeholder: '请先选择单位',
                    label: '层级',
                },
                {
                    keyName: 'unit',
                    label: '单位',
                    type: SelectCompanyAndProject,
                      disabled: this.editModel == 0,
                    attrs: {
                        labelInValue: true,
                    },
                },
                {
                    keyName: 'acitvityContent',
                    type: 'BaseTextarea',
                    label: '活动内容',
                    disabled: this.editModel == 0,
                    span: 24,
                },
                {
                    slot: true,
                    keyName: 'personIds',
                    label: '参加人员',
                    span: 24,
                },

                {
                    slot: true,
                    keyName: 'fileInfos',
                    label: '附件',
                    span: 24,
                },
            ]
        },
    },
    methods: {
        /**
         * 提交表单
         */
        handleSubmit() {
            let that = this
            let api = [updateSupervisePartyActivity, addSupervisePartyActivity][that.editModel - 1] // 根据操作切换url地址
            // 校验表单
            that.$refs.ruleForm.validate((e) => {
                if (e) {
                    // 提交表单
                    that.loading = true
                    let form = that.$clone(that.form)
                    form.orgName = form.unit.label
                    form.orgId = form.unit.value
                    api(form)
                        .then(() => {
                            that.loading = false
                            that.$message.success('提交成功！')
                            that.$multiTab.close()
                        })
                        .catch(() => {
                            that.loading = false
                        })
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.file_prompt {
    color: #999;
}
</style>